<template>
  <div class="app-container" align="center">

    <div     class="inputeSearcheSyle"  align="left">

      <el-input
        class="inputSyle"
        placeholder="搜索真的好了，不骗你"
        v-model="keyWords"
        prefix-icon="el-icon-search"
        @keyup.enter.native="handleSearch"
        />
    </div>



    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      :show-header =false
      class="tableSyle"
      highlight-current-row>

      <el-table-column align="center" label="编号" width="60px">
        <template slot-scope="scope">
          {{ scope.row.blogId }}
        </template>
      </el-table-column>

      <el-table-column label="标题" >
        <template slot-scope="scope">
          <a   style=" color: #4183c4" @click="handleTitleClick(scope.row.blogId)">  {{ scope.row.blogTitle }}  </a>

        </template>
      </el-table-column>


      <el-table-column label="时间"  width="100px">
        <template slot-scope="scope">
          {{ scope.row.updateTime }}
        </template>
      </el-table-column>
    </el-table>


    <!--分页控件-->
    <el-pagination class="articlePaginnation"
                   background
                   @current-change="handleCurrentChange"
                   layout="prev, pager, next"
                   :page-size="20"
                   :total=pageSum>
    </el-pagination>


  </div>
</template>

<script>
  import {getArticleList} from '@/api/apis'
  import {mapGetters} from 'vuex'

  export default {

    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: null,
        listLoading: true,
        currentPageNum: 1,
        pageSum: 0, //  数据总条数
        dialogVisible: false,
        prevViewPicUrl: "",
        keyWords:""
        // currentBlogId:0 ,

      }
    },
    created() {

      this.fetchData()
    },

    components: {},


    methods: {

      fetchData() {
        this.listLoading = true
        getArticleList(20 , this.currentPageNum).then(response => {
          this.pageSum = response.sum
          this.list = response.list
          this.listLoading = false
        })
      },

      handleCurrentChange(val) {
        this.currentPageNum = val
        this.fetchData()
      },

      handleTitleClick(tempId){
        // this.$message.success('去后台'+tempId);
        let routeData = this.$router.resolve({ path: '/blogShow', query: {  blogId:  tempId } });
        window.open(routeData.href, '_blank');
      } ,
      handleSearch(){
        let routeData = this.$router.resolve({ path: '/search', query: {  keyWords:  this.keyWords } });
        // let routeData = this.$router.resolve({ path: '/search', query: {  keyWords:  "天才" } });
        window.open(routeData.href, '_blank');
      }


    },

  }
</script>

<style>
  .articlePaginnation {
    margin-top: 0px;
  }

  .tableSyle {
    width: 80%;
    margin-top: 20px;

  }
  .inputeSearcheSyle {
    width: 80%;
    margin-top: 10px;


  }

  .inputSyle {
    width:300px;
  }


</style>


